<template>
  <el-dropdown trigger="click">
    <div class="avatar">
      <img :src="userAvatar()" alt="avatar" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="personInfo()">
          <el-icon><User /></el-icon>{{ $t("header.personalData") }}
        </el-dropdown-item>
        <el-dropdown-item @click="resetPassword()">
          <el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
        </el-dropdown-item>
        <el-dropdown-item @click="logout" divided>
          <el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref } from "vue";
import localCache from "@/utils/cache";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox, ElMessage } from "element-plus";
import avatarImage from "@/assets/images/avatar.gif";

const router = useRouter();
const userStore = useUserStore();

// 获取已存储的用户信息
const userInfo = JSON.parse(window.sessionStorage.getItem("user")).userInfo;

// 获取用户头像
const userAvatar = () => {
  const curInfo = userStore.getUserList.find((v: any) => v.U_ID === userInfo.U_ID);
  return curInfo.U_Picture ? import.meta.env.VITE_STATIC + curInfo.U_Picture : new URL(avatarImage, import.meta.url).href;
};

// 退出登录
const logout = () => {
  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    localCache.clearCache(false);
    // localStorage.removeItem("checkCount");
    // localStorage.removeItem("fourAspectCheckTime");
    // localStorage.removeItem("lastCheckedDate");
    // localStorage.removeItem("readed_Msg");
    window.location.reload();
    ElMessage.success("退出登录成功！");
  });
};
// 个人信息
const personInfo = () => {
  console.log("个人信息");
  router.push("/system/userInfo");
};
// 修改密码
const resetPassword = () => {
  router.push("/system/resetPassword");
};
</script>

<style scoped lang="scss">
.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
